<!DOCTYPE html>
<html>
<head>
<style> 
main{
    position: relative;
}
.a1{
    width:150px;
    height: 300px;
    border: 1px solid;
    border-radius:150px 0px 0px 150px; 
position: absolute;
background-color: white;
}
.a2{
    width:150px;
    height: 300px;
    border: 1px solid;
    border-radius:0px 150px 150px 0px; 
position: absolute;
left:152px;
background-color: black;
}
.a3{
    width:140px;
    height: 140px;
    border: 5px solid white;
    border-radius: 50%;
background-color: white;
position:absolute;
  left:75px;
   top:1px;
}
.a4{  width:140px;
    height: 140px;
    border: 5px solid;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    left:75px;
    top:152px;
}
.a5{  width:50px;
    height: 50px;
    border: 5px solid;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    left:120px;
    top:40px;}
 .a6{  width:50px;
    height: 50px;
    border: 5px solid white;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    left:120px;
    top:190px;}
</style>
<head>
</head>
<body>
    <main>
          <div class="a1"></div>
          <div class="a2"></div>
          <div class="a3"></div>
          <div class="a4"></div>
          <div class="a5"></div>
          <div class="a6"></div>
    </main>
  
</body>
</html>
